<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title>3D魔方小游戏</title>
        <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
    </head>
    
    <body>
        <div class="ui">
            <div class="ui__background"></div>
            <div class="ui__game"></div>
            <div class="ui__texts">
                <h1 class="text text--title"><span>· 解密魔方 ·</span></h1>
                <div class="text text--note">双击即可开始</div>
                <div class="text text--timer">0:00</div>
                <div class="text text--complete"> <span>Complete!</span>
                </div>
                <div class="text text--best-time">
                    <icon trophy></icon> <span>Best Time!</span>
                </div>
            </div>
            <div class="ui__prefs">
                <range name="flip" title="Flip Type" list="Swift&nbsp;,Smooth,Bounce"></range>
                <range name="scramble" title="Scramble Length" list="20,25,30"></range>
                <range name="fov" title="Camera Angle" list="Ortographic,Perspective"></range>
                <range name="theme" title="Color Scheme" list="Cube,Erno,Dust,Camo,Rain"></range>
            </div>
            <div class="ui__stats">
                <div class="stats" name="total-solves"> <i>今天获胜的数量：</i><b>-</b>
                </div>
                <div class="stats" name="best-time"> <i>最佳时间：</i><b>-</b>
                </div>
                <div class="stats" name="worst-time"> <i>最差时间：</i><b>-</b>
                </div>
                <div class="stats" name="average-5"> <i>Average of 5:</i><b>-</b>
                </div>
                <div class="stats" name="average-12"> <i>Average of 12:</i><b>-</b>
                </div>
                <div class="stats" name="average-25"> <i>Average of 25:</i><b>-</b>
                </div>
            </div>
            <div class="ui__buttons">
                <button class="btn btn--bl btn--stats">
                    <icon trophy></icon>
                </button>
                <button class="btn btn--bl btn--prefs">
                    <icon settings></icon>
                </button>
                <button class="btn btn--bl btn--back">
                    <icon back></icon>
                </button>
                <button class="btn btn--br btn--pwa"></button>
            </div>
        </div>
        <script src='js/three.min.js'></script>
        <script src="js/index.js"></script>
    <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'89b3c25eedb62eb1',t:'MTcxOTY0MTQ4OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='cdn-cgi/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>

</html>